;(function($){
    "use strict";
    
    // 绑定成jq的全局方法，非DOM，工具类
    // 1. 直接绑定全局：
    // $.banner = function(){}
    // 2. 借助jq的工具方法绑定全局
    // $.extend({ banner:function(){} })
    
    // 绑定成jq的局部方法，DOM方法
    // jq的DOM原型对象是：$.fn
    // 1. 直接绑定局部：
    // $.fn.banner = function(){}
    // 2. 借助jq的工具方法绑定局部
    // $.extend($.fn, { banner:function(){} })
    // $.fn.extend({ banner:function(){} })

    $.fn.banner = function(items, {btns=true, list=true, autoPlay=true, index=0, delayTime=2000, moveTime=200}={}){
        // console.log(item);
        // console.log(btns, list, autoPlay, delayTime, moveTime, index);
        // console.log(this);
        // console.log("轮播图功能")

        let prev;

        // 1. 创建图片容器，及图片，并插入到页面（显示了当前索引对应的图片）
        // <div class="imgbox">
        //     <img src="./imgs/banner1.jpg" alt="">
        // </div>
        let imgs = "";
        for(let i=0;i<items.length;i++){
            imgs += `<img src="${items[i].src}" alt="">`
        }
        $("<div class='imgbox'></div>").appendTo(this).html(imgs).children("img").eq(index).css({left:0});

        // 2. 判断是否需要左右按钮
        if(btns){
            // 创建左右按钮，绑定事件
            // <div class="btns">
            //     <button class="left">左</button>
            //     <button class="right">右</button>
            // </div>
            $("<div class='btns'></div>").appendTo(this).append($("<button class='left'>左</button>")).append($("<button class='right'>右</button>")).children(".left").click( leftClick ).end().children(".right").click( rightClick );
        }

        // 定义事件处理函数，实现切换功能
        function leftClick(){
            // 计算索引
            if(index === 0){
                index = items.length-1;
                prev = 0;
            }else{
                index--;
                prev = index+1;
            }
            // 运动
            move(prev, index, 1);
        }

        function rightClick(){
            // 计算索引
            if(index === items.length-1){
                index = 0;
                prev = items.length-1;
            }else{
                index++;
                prev = index-1;
            }
            // 运动
            move(prev, index, -1);
        }

        const that = this;
        function move(p, i, d){
            // 要走的：从哪走，走到哪
            that.children(".imgbox").children("img").eq(p).css({
                left:0
            }).stop().animate({
                left:600*d
            }, moveTime)
            // 进来的：从哪进，进到哪
            .end().eq(i).css({
                left:-600*d
            }).stop().animate({
                left:0
            }, moveTime);

            // 切换分页器的当前高亮效果
            that.children(".list").children("span").eq(i).css({
                background:"red",
                color:"#fff"
            }).addClass("active").end().eq(p).css({
                background:"",
                color:""
            }).removeClass("active")
        }
        
        // 3. 判断是否需要分页器
        if(list){
            // 创建元素，绑定点击事件
            // <div class="list">
            //     <span class="active">1</span>
            //     <span>2</span>
            // </div>
            let listStr = "";
            items.forEach((val, idx)=>{
                listStr += `<span>${ idx }</span>`
            })
            $("<div class='list'></div>").appendTo(this).html(listStr).children("span").eq(index).css({
                background:"red",
                color:"#fff"
            }).addClass("active").end().click(function(){
                // 记录点击的索引，用来作为要进来的图片的索引
                let clickIndex = $(this).index();
                // 判断点击的索引和当前索引的大小，用来区分方向
                if(index > clickIndex){
                    // 调用运动，传入：要走的，要进来的，方向
                    move(index, clickIndex, 1);
                }
                if(index < clickIndex){
                    // 调用运动，传入：要走的，要进来的，方向
                    move(index, clickIndex, -1);
                }
                // 当前点击功能执行完毕后，将点击的索引设置为下次要走的索引
                index = clickIndex;
            })
        }
        

        // 4. 判断是否需要自动播放
        if(autoPlay){
            // 初始立即自动播放
            let t = setInterval(()=>{
                rightClick();
            }, delayTime);

            // 鼠标进入停止
            this.hover(function(){
                clearInterval(t);
            }, function(){
                // 鼠标离开继续
                t = setInterval(()=>{
                    rightClick();
                }, delayTime);    
            })
        }
        
    }

})(jQuery);
